<template>
  <div class="sortComponent">
        <div class="rightItem">
        <van-image
        width="100"
        height="100"
        :src="categoryImg.bannerUrl"
        />
        <div class="rightItemList" v-for="item in categoryList" :key="item.id">
            <div class="textLine">
                <div class="componentText">{{ item.name }}</div>
                <div class="line"></div>
            </div>
            <div class="gridList">
                <div class="gridItem" v-for="list in item.categoryList" :key="list.id" @click="toSortList(list.superCategoryId,list.id,list.categoryType)">
                    <img class="gridImg" :src="list.wapBannerUrl" alt="">
                    <div class="itemText">{{ list.name }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script lang="ts">
import { List } from 'vant';
import {onMounted} from 'vue'
import {defineComponent} from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'VSort',
  props:['categoryList','categoryImg']
})
</script>
<script setup lang="ts">

const Router = useRouter()

const toSortList = (categoryId:number,subCategoryId:number,categoryType:number)=>{
    Router.push({
        path:'/item/cateList/sortList',
        query:{ 
            categoryId,
            subCategoryId,
            categoryType  
            
        }
    })
    
}

</script>
<style lang="less" scoped>
:deep(.van-image__loading){
  width: 264px;
  height: 96px;
}
.sortComponent{
    // width: (100vw - 55.2px);
    display: flex;
    flex-direction: column;
    // padding-left: 15px;
}
.componentText{
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 5px;
}
.rightItem{
    padding-top: 10px;
}
.line{
    width: 264px;
    height: 1px;
    background-color: #e8e8e8;
    // margin-bottom: 10px;
}
.main{
    display: flex;
}

.textLine{
    height: 26px;
    margin-top: 10px;
}
.van-grid{
    margin-top: 10px;
    // width: 80px;
}
.van-icon__image{
    width: 33.333333%;
    height: 70px;
}
// :deep(.van-image__img){
//     width: 70px;
//     height: 70px;
// }

.gridList{
    width: 265px;
    display: flex;
    flex-wrap: wrap;
}
.gridItem{
    // width: 33.33333%;
    height: 100px;
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    margin-top: 10px;
}
.gridImg{
    width: 72px;
    height: 72px;
}
.itemText{
    width: 72px;
    height: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
}
img.van-image__img{
    width: 70px;
    height: 70px;
}
.van-image{
    width: 70px;
    height: 70px;
}
</style>